<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>霞客约车注册页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="${ctxStatic }/wx/css/load_register.css" />
		<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
	</head>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}
		label{
			font-size: 14px;
		}
		#xiake_load {
			width: 100%;
			height: 100%;
			position: relative;
		}	
		.mui-input-group {
			margin-top: 10%;
		}
		.mui-input-group:before{
			background: none;
		}
		.mui-input-group:after{
			background: none;
		}
	</style>
	<script>
		Zepto(function(){
			$('.register_iik').click(function(){
				$(this).children().addClass('register_gs').parent().siblings().children().removeClass('register_gs')
			    var inx=$(this).index();
			    $('.register_body').eq(inx).show().siblings('.register_body').hide();
			})
		})
	</script>
	<body>
		<div id="xiake_registers">
			<p class="xk_load_tit">霞客约车注册</p>
			<div class="mui-content">
					<div class="mui-row register_tit">
						<div class="mui-col-xs-6 register_iik">
							<span class="register_gs">个人</span>
						</div>
						<div class="mui-col-xs-6 register_iik">
							<span>单位</span>
						</div>
					</div>
					<div class="register_wrap">
						<div class="register_body">
							<form class="mui-input-group" id="registerForm" method="post" action="${ctxWx}/pu/doregister">
							<input type="hidden" name="code" value="${param.code }">
							    <div class="mui-input-row">
							        <label>手机号码</label>
							        <input type="number" class="mui-input-clear" placeholder="请输入手机号码" name="mobile" id="mobile1">
							    </div>
							    <div class="mui-input-row">
							        <label>密码</label>
							        <input type="password" class="mui-input-clear" placeholder="请输入密码" id="newPassword" name="newPassword" >
							    </div>
							    <div class="mui-input-row">
							        <label>确认密码</label>
							        <input type="password" class="mui-input-clear" placeholder="请确认密码" id="confirmNewPassword" name="confirmNewPassword">
							    </div>
							    <div class="mui-input-row">
							        <label>验证码</label>
							        <input type="text" class="mui-input-clear" placeholder="请输入验证码" style="width: 30%;float: left;" name="validateCode">
							        <button  class="forgot_time" id="btn" onclick="settime(this)" >获取验证码</button>
							    </div>
							    <p class="existing_number">
							    	  <span id="log2">已有账号，请登录</span>
							    </p>
							    <div class="register_btns">
						              <input type="button" value="注册" id="subBtn" />
							    </div>
							</form>
						</div>
						<div class="register_body register_hide">
							<form class="mui-input-group" id="registerForm2" method="post" action="${ctxWx}/pu/doregister">
							<input type="hidden" name="code" value="${param.code }">
								<input type="hidden" name="userType" value="1"/>
								<div class="mui-input-row">
							        <label>单位名称</label>
							        <input type="text" class="mui-input-clear" placeholder="请输入单位名称" name="officeName">
							    </div>
							    <div class="mui-input-row">
							        <label>经办人</label>
							        <input type="text" class="mui-input-clear" placeholder="请输入经办人姓名" name="name">
							    </div>
							    <div class="mui-input-row">
							        <label>手机号码</label>
							        <input type="number" class="mui-input-clear" placeholder="请输入手机号码" id="mobile2" name="mobile2">
							    </div>
							    <div class="mui-input-row">
							        <label>密码</label>
							        <input type="password" class="mui-input-clear" placeholder="请输入密码" name="newPassword2" id="UserPass">
							    </div>
							    <div class="mui-input-row">
							        <label>确认密码</label>
							        <input type="password" class="mui-input-clear" placeholder="请确认密码" id="RePass" name="confirmNewPassword2">
							    </div>
							    <div class="mui-input-row">
							        <label>验证码</label>
							        <input type="text" class="mui-input-clear" placeholder="请输入验证码" style="width: 30%;float: left;" name="validate2">
							        <button type="button" class="forgot_time" id="btn2" onclick="settime2(this)">获取验证码</button>
							    </div>
							    <p class="existing_number">
							    	 <span id="log">已有账号，请登录</span>
							    </p>
							    <div class="register_btns">
						              <input type="button" value="注册" id="subBtn2"/>
							    </div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="${ctxStatic }/mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			document.getElementById('subBtn').addEventListener('tap', function(){
				$('#registerForm').submit();
			});
			document.getElementById('subBtn2').addEventListener('tap', function(){
				$('#registerForm2').submit();
			});
			document.getElementById('log').addEventListener('tap', function(){
				mui.openWindow({
			    url: '${pageContext.request.contextPath }/wxlogin.jsp', 
			    id:'xiakeload'
			  });
			});
			document.getElementById('log2').addEventListener('tap', function(){
				mui.openWindow({
			    url: '${pageContext.request.contextPath }/wxlogin.jsp', 
			    id:'xiakeload'
			  });
			});
			Zepto(function() {
				var keyVal2 = "${sessionScope.mes}";
				if(keyVal2.length!=0){  
					mui.alert(keyVal2);
				}
				 $("#btn").attr("disabled", true); 
				 $("#btn2").attr("disabled", true); 
				 $("#subBtn").attr("disabled", true);
				 $("#subBtn2").attr("disabled", true); 
				 //手机号校验
				 $("input[name='mobile']").blur(function(){
				//获取输入的值
				var $value=$(this).val();
				if($value.length!=0){  
					$.post("${ctxFront}/sms/checkTel","mobile="+$value,function(d){
						if(d==1){
						}else if(d==0){
							mui.alert('手机号已被使用');
						}else if(d==2){
							mui.alert('手机号码格式不正确');
						}
					});
					}
				});
				$("input[name='mobile2']").blur(function(){
					//获取输入的值
					var $value=$(this).val();
					if($value.length!=0){  
					$.post("${ctxFront}/sms/checkTel","mobile="+$value,function(d){
							if(d==1){
							}else if(d==0){
								mui.alert('手机号已被使用');
							}else if(d==2){
								mui.alert('手机号码格式不正确');
							}
						});
						}
				});
				//确认密码
				$("input[name='confirmNewPassword']").blur(function(){
					//获取输入的值
					var $password1=$("#newPassword").val();
					var $password2=$(this).val();
					if($password1.length!=0 && $password2.length!=0){  
						$.post("${ctxFront}/sms/checkPassword",{"password1":$password1,"password2":$password2},function(d){
							if(d==0){
								mui.alert('两次输入的密码不一致');
								$("#newPassword").on('tap',function(){
									$("#confirmNewPassword").val("");
								})
							}else if(d==1){
								mui.alert('6-16位数字和字母的组合');
								$("#newPassword").on('tap',function(){
									$("#confirmNewPassword").val("");
								})
							}else if(d==2){
								$('#btn').removeAttr('disabled');
								var $value=$("input[name='mobile']").val();
								$("#btn").click(function(){
									$.post('${ctxFront}/sms/send', {"phone":$value,"type":0},function(data) {
										if (data != 'success') {
											mui.alert(data);
										} 
									});
									$('#subBtn').removeAttr('disabled');
								});
							}
						});
					}
				});
				$("input[name='confirmNewPassword2']").blur(function(){
		//获取输入的值
		var $password3=$("#UserPass").val();
		var $password4=$(this).val();
		if($password3.length!=0 && $password4.length!=0){  
			$.post("${ctxFront}/sms/checkPassword",{"password1":$password3,"password2":$password4},function(d){
					if(d==0){
						mui.alert('两次输入的密码不一致');
						$("#UserPass").click(function(){
							$("#RePass").val("");
						})
					}else if(d==1){
						mui.alert('6-16位数字和字母的组合');
						$("#UserPass").click(function(){
							$("#RePass").val("");
						})
					}else if(d==2){
						$('#btn2').removeAttr('disabled');
						var $value=$("input[name='mobile2']").val();
						$("#btn2").click(function(){
							$.post('${ctxFront}/sms/send', {"phone":$value,"type":0},function(data) {
								if (data != 'success') {
									mui.alert(data);
								} 
							});
							$('#subBtn2').removeAttr('disabled');
						});
							}
						});
					}
				});
			})
			var countdown = 120;
			function settime(obj) {
				if (countdown == 0) {
					obj.removeAttribute("disabled");
					obj.innerHTML = "获取验证码";
					countdown = 120;
					return;
				} else {
					obj.setAttribute("disabled", true);
					obj.innerHTML = "重发(" + countdown + ")";
					countdown--;
				}
				setTimeout(function() {
					settime(obj)
				}, 1000)
			}
			function settime2(obj) {
				if (countdown == 0) {
					obj.removeAttribute("disabled");
					obj.innerHTML = "获取验证码";
					countdown = 120;
					return;
				} else {
					obj.setAttribute("disabled", true);
					obj.innerHTML = "重发(" + countdown + ")";
					countdown--;
				}
				setTimeout(function() {
					settime2(obj)
				}, 1000)
			};
		</script>
		<%
session.removeAttribute("mes");
	%>
	</body>

</html>